<template>
  <div class="page" style="height:100%">
    <headerm :menu="menu" :isreportHome="isreportHome" :showRealTime="showRealTime" @update="update" @logout="logout" :headName="headName"></headerm>
    <mainm id='main' style="min-height:100%;font-size:0" :class="column?'':'brief'">
      <cloumnm v-if="column" :menu="menu" :menutype="report?true:false" :headerActive="headerActive" @switchClick="resize">
      </cloumnm>
      <div id="content" :style="{'min-width':'85%'}">     <!--  'width':contWidth, -->
      <!-- <div id="content" :style='"width:"+(width==100?100+"%;":width+"px;")'> -->
        <slot></slot>
      </div>
    </mainm>
    <div id="go_top" class="iconfont icon-gotop" :class="gotopshow?'blockgotop':''" @click="gotop" ></div>
  </div>
  
</template>
<style lang="scss">
// .page{
//     position: fixed;
//     top: 0;
//     left: 0;
//     right: 0;
//     bottom: 0;
//   }
  #main{
    display: -webkit-flex; /* Safari */
    display: flex;
    align-items:stretch;
    padding: 0 0 13px  0;
    &.brief{
      padding: 0;
      #content{
        padding:0 0 0 8px; 
      }
    }
    #content{
      transition: width 0.2s;
      padding: 0 8px 0 13px; 
      font-size:16px;
      // margin-bottom: 40px;
      flex:1;
      -webkit-box-flex: 1;
      -ms-flex: 1;
        .hei13 {
          height: 13px;
          width: 100%;
        }
    }


    
  }

  #go_top {
    font-size: 32px;
    position: fixed;
    bottom: -100%;
    right: 30px;
    font-weight: bold;
    border-radius: 50%;
    color: #6689f1;
    cursor: pointer;
    transition: all 0.3s;
    //  background-color: #8EC5FC;
    //  background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
    z-index: 9999;

    &.blockgotop {
      bottom: 20px;
    }
  }
</style>
<script>
import Header from '@/components/page/header'
import Cloumn from '@/components/page/column'
import Main from '@/components/page/main'
export default {
  props:{
    column:{
      default:true,
    },
    report:{
      default:false,
    },
    isreportHome:{
      default:false
    }
  },
  data() {
    return {
      contWidth:'',
      leftWidth:250,
      menu:[],
      buttons:[],
      headerActive:'',//header头部选中的菜单，参数是menu_url
      headName:'',//所属企业或案场或Root
      isRoot:false,
      gotopshow:false,
      showRealTime:0,
    }
  },
  components: {
    headerm: Header,
    cloumnm:Cloumn,
    mainm:Main,
  },
  created(){
    // let lang = navigator.language||navigator.userLanguage;//常规浏览器语言和IE浏览器
    // console.log(lang);
    // lang = lang.substr(0, 2);//截取lang前2位字符
    // console.log(lang);
    // if(lang == 'zh'){
    //   this.$i18n.locale = lang;
    //   localStorage.language = lang
    // }
    // console.log(this.$i18n.locale);

    //从localStorage中获取当前头部选中的菜单
    this.headerActive = this.$route.meta.type;
    this.headName = localStorage.headName;
    this.showRealTime = localStorage.showRealTime ? localStorage.showRealTime : 0;
    this.getReady();
  },
  mounted(){
    this.$Bus.$on("ContentWidthChange",(val)=>{
      this.contWidth=val;
    });
    //如果存在两个账号，则刷新第一个账号权限
    this.$Bus.$on("tokenUpdate",()=>{
      this.update();
    });
    window.onscroll=()=>{
      this.gotopshow=$(window).scrollTop()>300?true:false;
    }
    // setTimeout(() => {
    //   this.resize()
    // }, 0);
    window.onresize=this.resize;
  },
  beforeDestroy(){
    //离开page页面的时候清除绑定事件
    this.$Bus.$off('ContentWidthChange');
    window.onresize=null;
    window.onscroll=null;
  },
  methods: {
    gotop(){
      $("html").animate({scrollTop:0},400);
    },
    //调用权限方法
    getReady(callback = null){
      //获取该用户权限下的菜单列表
      let buttons = ()=>{
        let p = new Promise((res)=>{
          let url = '/sys/menu/auth_buttons'
          this.$api.get(url)
          .then(data =>{
            let _data = data.data
            // console.log(_data);
            sessionStorage.setItem('buttonPermissions', JSON.stringify(_data));
            res(_data);
          })
        })
        return p;
      }
      //获取该用户权限下的菜单列表
      let menus = ()=>{
        let p = new Promise((res)=>{
          let url = '/sys/menu/auth_menus'
          this.$api.get(url)
          .then(data =>{
            let _data = data.data
            recursion(_data)
            function recursion(data){
              for(let i in data){
                if(data[i].children && data[i].children.length){
                  data[i].showChildren = false
                  recursion(data[i].children)
                }
              }
            }

            let arr = _data.map(x=>x.menu_url)
            if(arr.includes('realTimeChain') && arr.includes('realTimeMall')){
              this.showRealTime = 1
            }else{
              this.showRealTime = 0
            }
            localStorage.showRealTime = this.showRealTime
            sessionStorage.setItem('menu', JSON.stringify(_data))
            res(_data)
          })
        })
        return p
      }
      //判断是否存有菜单，如果没有则调用接口
      if(!sessionStorage.menu || !sessionStorage.buttonPermissions){
        Promise.all([buttons(),menus()])
        .then((res)=>{
          this.buttons = res[0]
          this.menu = res[1]
          this.$emit('buttons',this.buttons)
          callback && callback(true)
        })
      }else{
        callback && callback(false)
        this.menu = JSON.parse(sessionStorage.menu);
        // console.log(this.menu);
        this.buttons = JSON.parse(sessionStorage.buttonPermissions)
      }
    },
    //刷新权限方法
    update(){
      //删除sessionStorage中存储的menu和buttons权限
      sessionStorage.removeItem('menu');
      sessionStorage.removeItem('buttonPermissions');
      this.$Bus.$emit('Loading',true)
      // this.$api.get("/sys/report_assist_new/refresh_data_cache")
      // .then(data=>{
      //   console.log(data);
      // })
      //从新请求权限
      this.getReady(data=>{
        if(data){
          localStorage.removeItem('headerActive');
          this.$router.push('/');
          this.$message.success('刷新成功');
          this.$Bus.$emit('Loading',false)
        }else{
          this.$message.error('刷新失败');
          this.$Bus.$emit('Loading',false)
        }
      })
    },
    //登出方法
    logout(){
      this.$confirm('确定登出该账号？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.token='';
        //判断是否是单点登录的用户
        if(localStorage.isSSO == 1){
          if(localStorage.logoutUrl){
            window.location.href = localStorage.logoutUrl
          }else{
            let browserName = navigator.appName;
            if (browserName == "Netscape") {
              window.location.href = "about:blank";                    //关键是这句话
              window.close();
            } else if (browserName == "Microsoft Internet Explorer") {
              window.opener = null;
              window.close();
            }
          }
          localStorage.clear();
          sessionStorage.clear();
        }else{
          localStorage.clear();
          sessionStorage.clear();
          this.$router.push('login')
        }
      }).catch(()=>{

      })
    },
    //初始化页面宽度
    resize(){
      let main = document.querySelector('#main');
      if(!this.column){
        this.width = main.clientWidth
      }else{
        let leftWidth = document.querySelector('#column').clientWidth
        this.width = main.clientWidth - leftWidth
      }
    },
  },
  watch:{}
}
</script>
